<template>
	<div class="login-main">
		<div class="login-title">
			<img src="../assets/image/logo.png">
		</div>
		<div class="login-con">
			<form>
				<div class="form-item">
					<i></i>
					<input type="text" v-model="username" placeholder="手机号码">
				</div>
				<div class="form-item">
					<i></i>
					<input type="text" class="small-input" v-model="code" placeholder="验证码">
					<a href="javascript:;" class="send-code" v-on:click="sendCode(this)">{{codemessage}}</a>
				</div>
				<div class="form-item">
					<i></i>
					<input type="password" v-model="password" placeholder="新密码">
				</div>
				<div class="form-item">
					<i></i>
					<input type="password" v-model="newpassword" placeholder="新密码">
				</div>				
				<input type="button" class="sub" value="注册" v-on:click="submit">				
			</form>			
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import MessageBox from 'mint-ui/lib/message-box'
import 'mint-ui/lib/message-box/style.css'
import VueResource from '../assets/js/vue-resource'
Vue.use(VueResource)

export default {
  	name: 'app',
  	data () {
    	return {
    		countdown: 60,
	      	code : '',
	  		password: '',
	  		newpassword: '',
	  		username: '',
	  		codemessage: '| 发送验证码'
    	}
  	},
  	methods: {

  		//倒计时功能
  		settime: function(elem) {
  			let that = this;
			if (this.countdown == 0) {
				this.codemessage = "| 获取验证码";
				this.countdown = 60;
			} else {
				this.countdown--;
				this.codemessage = "| "+ this.countdown + "S后重发";
				setTimeout(function() {
					that.settime(elem);
				}, 1000)
			}  			
  		},

  		//发送验证码
  		sendCode: function(elem) {
  			//手机正则
  			const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;

  			//验证码类型
  			let type = 'forget';

  			//验证手机号是否正确
  			if(!phoneReg.test(this.username)) {
  				MessageBox('提示', '请输入正确手机号');
  				return;
  			}

  			//防止连续发送
			if(this.countdown == 60) {
		 		this.settime(elem, this.countdown) 

			 	//请求
	  			this.$http.post('/laravel/public/sendCode', {type: type, username: this.username}).then(response => {
	  				if(response.body.status == "error") {
	  					MessageBox('提示', '短信发送失败，请刷新页面重试');
	  				}
	  			}, response => {
	  				MessageBox('提示', response.body.msg);
	  			})
		 	}
  		},

  		//确认注册
  		submit: function() {
  			if(this.password == this.newpassword) {
	  			this.$http.post('/laravel/public/register', {
	  					username: this.username, 
	  					code: this.code, 
	  					password: this.password
	  				})
	  			.then(response => {
	  				MessageBox('提示', response.body.msg);
	  			}, response => {
	  				MessageBox('提示', response.body.msg);
	  			})
  			} else {
  				MessageBox('提示', '两次输入的密码不一致');
  			}
  		}
  	}
}
</script>
<style lang="scss">

body {
	background: linear-gradient(to right, #7bcacc 0%, #49a1a7 100%);
}

.login-main {
	.login-title {
		padding-top: 3.7rem;
		margin: 0 auto 1.325rem;
		width: 5.25rem;
		height: 3.325rem;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.form-item {
		margin: 0 auto;
	    height: 2.4rem;
	    width: 11.525rem;
	    border-bottom: 2px solid #fff;
	    font-size: 0.7rem;

		input {
			margin-top: 1rem;
		    height: 1.4rem;
		    width: 100%;
		    border: none;
		    outline: none;
		    color: #fff;
		    background: transparent;
		}

		input.small-input {
			display: inline-block;
			width: 8.275rem;
		}

		.send-code {
			display: inline-block;
			margin-left: -3px;
			height : 0.85rem;
			vertical-align: middle;
		}

		a {
			color: #fff;
			font-size: 0.5rem;
		}
	}

	.sub {
		display: block;
		margin: 1.45rem auto 0;
		width: 11.525rem;
		height: 1.775rem;
		font-size: 0.75rem;
		background: #fff;
		color: #6ad2d3;
		border: none;
		outline: none;
	}

	.forget {
	    margin: 0 auto;
	    display: block;
	    width: 11.525rem;
	    line-height: 1.45rem;
	    text-align: right;
	    color: #fff;
	}
}
</style>